<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .item {
    width: 500px;
    background-color:skyblue;
      /* 不让div元素独占一行 */
      /* 方式一:改变元素的特性和垂直方向的布局 */
      /* display: inline-block;
      vertical-align: top; */
      /* 方式二:通过浮动完成 */
      float:left;
  }
  .album {
    width:500px;

  }
  .keyword {
    font-size: 30px;
    color: white;
    background: orange;

  }
  </style>
</head>
<body>
  <h1>星球介绍</h1>
  <!--木星介绍-->
  <div class="item">
    <h2>星球</h2>
    <!--alt->alternotive-->
    <img class="album" src="../images/muxing.jpg" alt="木星">
    <p>
      <span class="keyword" class="keyword">木星（Jupiter)</span>是太阳系八大行星中体积最大、自转最快的行星，从内向外的第五颗行星。它的质量为太阳的千分之一，是太阳系中其它七大行星质量总和的2.5倍。由于木星与土星、天王星、海王星皆属气体行星，因此四者又合称类木行星（木星和土星合称气态巨行星）。木星是一个气态巨行星，占所有太阳系行星质量的70%，主要由氢组成，占其总质量的75%，其次为氦，占总质量的25%，岩核则含有其他较重的元素。人类所看到的通常是大气中云层的顶端，压强比1个大气压略高。
    </p>
  </div>
<!--地球的-->
  <div class="item">
  <h2>地球介绍</h2>
  <img class="album" src="../images/diqiu.jpg" alt="地球">
  <p>
    <span class="keyword" class="keyword">地球（Earth）</span>是太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁， [1] 它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。
  </p>
  </div>
</body>
</html>！
